<script setup>
defineProps({
  menuItems: {
    type: Array,
    required: true
  },
  activeMenu: {
    type: String,
    required: true
  }
});

const emit = defineEmits(['switch-menu']);

function handleMenuClick(menuId) {
  emit('switch-menu', menuId);
}
</script>

<template>
  <div class="menu-tabs">
    <div 
      v-for="item in menuItems" 
      :key="item.id" 
      class="menu-tab" 
      :class="{ active: activeMenu === item.id }"
      @click="handleMenuClick(item.id)"
    >
      <i class="menu-icon" :class="item.icon"></i>
      <span>{{ item.name }}</span>
    </div>
  </div>
</template>

<style scoped lang="scss">
.menu-tabs {
  display: flex;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background-color: #1f2129;
  padding: 0 10px;

  .menu-tab {
    padding: 14px 20px;
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #99a3a7;
    position: relative;
    transition: all 0.25s ease;

    &:hover {
      color: #0096ff;
      background-color: rgba(0, 150, 255, 0.05);
    }

    &.active {
      color: #0096ff;
      position: relative;

      &::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 50%;
        width: 30px;
        height: 3px;
        background: linear-gradient(45deg, #0096ff, #6c47ff);
        transform: translateX(-50%);
        border-radius: 6px 6px 0 0;
        transition: all 0.3s ease;
      }

      .menu-icon {
        transform: translateY(-2px);
      }
    }

    .menu-icon {
      font-size: 1.2rem;
      transition: transform 0.2s ease;
    }
  }
}
</style>